<template>
    <div class="device-list">
        <!-- 新增设备卡片 -->
        <div class="device-card new-device" @click="showNewDeviceForm = true">
            <h3>新增设备</h3>
        </div>

        <!-- 已有设备卡片列表 -->
        <div class="device-card" v-for="device in devices" :key="device.id">
            <h3>设备名称：{{ device.name }}</h3>
            <p>设备ID: {{ device.id }}</p>
            <p>状态: {{ device.status }}</p>
            <button @click="viewDevice(device)">查看</button>
            <button @click="deleteDevice(device.id)">删除</button>
        </div>

        <!-- 新增设备表单（可以使用模态框组件） -->
        <div v-if="showNewDeviceForm" class="modal">
            <div class="modal-content">
                <span class="close" @click="showModal = false">&times;</span>
                <h2>添加设备</h2>
                <form @submit.prevent="addDevice">
                    <div>
                        <label for="deviceName">设备名称：</label>
                        <input type="text" id="deviceName" v-model="newDevice.name" required>
                    </div>
                    <div>
                        <label for="deviceType">设备类型：</label>
                        <input type="text" id="deviceType" v-model="newDevice.type" required>
                    </div>
                    <div>
                        <label for="deviceManufacturer">设备厂商：</label>
                        <input type="text" id="deviceManufacturer" v-model="newDevice.manufacturer" required>
                    </div>
                    <div>
                        <label for="deviceApplication">设备应用：</label>
                        <textarea id="deviceApplication" v-model="newDevice.application"></textarea>
                    </div>
                    <button type="submit">提交</button>
                </form>
            </div>
        </div>
    </div>
</template>  
    
<script>
export default {
    data() {
        return {
            devices: [
                //设备数据  
                { id: '0001', name: '设备A', status: '在线' },
                { id: '0002', name: '设备B', status: '在线' },
                { id: '0003', name: '设备C', status: '故障' },
                { id: '0004', name: '设备D', status: '在线' },
                { id: '0005', name: '设备E', status: '离线' },
                { id: '0006', name: '设备F', status: '离线' },
                { id: '0007', name: '设备G', status: '在线' },
                { id: '0008', name: '设备H', status: '在线' },
            ],
            newDevice: { // 新设备对象，用于绑定表单输入  
                name: '',
                type: '',
                manufacturer: '',
                application: '',
            },
            showNewDeviceForm: false,
        };
    },
    methods: {
        addDevice() {
            // 在这里添加添加设备的逻辑  
            //调用addDeviceToServer  
            // 检查必填项是否都已填写  
            if (!this.newDeviceName || !this.newDeviceId || !this.newDeviceStatus) {
                alert('请填写所有必填项！');
                return;
            }

            // 这里假设有一个模拟API调用的函数  
            // 在实际应用中，你需要替换为真实的API调用  
            this.addDeviceToServer()
                .then(response => {
                    // 假设服务器返回了新添加的设备信息  
                    const newDevice = response.data;
                    // 将新设备添加到设备列表中  
                    this.devices.push(newDevice);
                    // 清空表单字段  
                    this.newDeviceName = '';
                    this.newDeviceId = '';
                    this.newDeviceStatus = '';

                    // 关闭新增设备表单  
                    this.showNewDeviceForm = false;

                    // 提示用户添加成功  
                    alert('设备添加成功！');
                })
                .catch(error => {
                    // 处理添加设备时出现的错误  
                    console.error('添加设备失败:', error);
                    alert('添加设备失败，请稍后再试！');
                });
        },
        addDeviceToServer() {
            // 添加设备
            return new Promise((resolve, reject) => {
                // 模拟API调用的延迟  
                setTimeout(() => {
                    // 返回一个模拟的响应数据  
                    const mockResponse = {
                        data: {
                            id: this.newDeviceId,
                            name: this.newDeviceName,
                            status: this.newDeviceStatus,
                        },
                    };
                    resolve(mockResponse);
                }, 1000);
            });
        },
        viewDevice(device) {
            // 在这里添加查看设备的逻辑  
            // 例如弹出详情模态框或导航到详情页面  
            console.log('查看设备:', device);
        },
        deleteDevice(deviceId) {
            // 第一次检验 ：ID是否存在于设备列表中  
            const deviceIndex = this.devices.findIndex(device => device.id === deviceId);
            if (deviceIndex === -1) {
                alert('未找到对应的设备！');
                return;
            }

            // 弹出确认框，询问用户是否确定删除设备  
            if (!window.confirm('你确定要删除这个设备吗？')) {
                return;
            }

            // 第二次检验：进行删除
            this.deleteDeviceFromServer(deviceId)
                .then(response => {
                    // 确认设备已被删除  
                    if (response.data.success) {
                        // 从本地设备列表中删除设备  
                        this.devices.splice(deviceIndex, 1);
                        alert('设备删除成功！');
                    } else {
                        //检验失败，设备不存在或其他错误  
                        alert('服务器响应错误，设备删除失败！');
                    }
                })
                .catch(error => {
                    // 处理删除设备时出现的网络错误或其他错误  
                    console.error('删除设备失败:', error);
                    alert('删除设备失败，请稍后再试！');
                });
        },
        deleteDeviceFromServer(deviceId) {
            return new Promise((resolve, reject) => {
                // 假设API调用的URL和必要的参数  
                const url = `/api/devices/${deviceId}`;
                const method = 'DELETE';

                // 使用fetch发送请求  
                fetch(url, { method })
                    .then(response => {
                        if (response.ok) {
                            return response.json();
                        } else {
                            throw new Error('服务器响应错误');
                        }
                    })
                    .then(data => {
                        resolve(data);
                    })
                    .catch(error => {
                        reject(error);
                    });
            });
        },


    },
};
</script>  
<style scoped>
.device-list {
    display: flex;
    flex-wrap: wrap;
}

.device-card {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 400px;
    text-align: center;
    cursor: pointer;
}

.new-device {
    background-color: #f0f0f0;
}

/* 样式定义用于模态框中的设备添加表单 */
.new-device-form {
    width: 100%;
    /* 表单宽度 */
    max-width: 600px;
    /* 最大宽度，以适应不同屏幕大小 */
    margin: 0 auto;
    /* 水平居中 */
    padding: 20px;
    /* 内边距 */
}

.new-device-form label {
    display: block;
    /* 标签独占一行 */
    margin-bottom: 5px;
    /* 与输入字段之间的间距 */
    font-weight: bold;
    /* 加粗字体 */
}

.new-device-form input[type="text"],
.new-device-form textarea {
    width: 100%;
    /* 输入字段宽度 */
    padding: 8px;
    /* 内边距 */
    box-sizing: border-box;
    /* 包含内边距和边框在宽度内 */
    border: 1px solid #ccc;
    /* 边框 */
    border-radius: 4px;
    /* 边框圆角 */
    margin-bottom: 15px;
    /* 输入字段之间的间距 */
}

.new-device-form textarea {
    height: 100px;
    /* 文本域的高度 */
    resize: vertical;
    /* 允许用户垂直调整大小 */
}

.new-device-form button[type="submit"] {
    width: 100%;
    /* 提交按钮宽度 */
    padding: 10px;
    /* 内边距 */
    background-color: #4CAF50;
    /* 背景色 */
    color: white;
    /* 文本颜色 */
    border: none;
    /* 无边框 */
    border-radius: 4px;
    /* 边框圆角 */
    cursor: pointer;
    /* 鼠标悬停时显示点击手势 */
}

.new-device-form button[type="submit"]:hover {
    background-color: #45a049;
    /* 鼠标悬停时的背景色 */
}

.modal {
    display: block;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    /* Could be more or less, depending on screen size */
}

.close {
    color: #aaaaaa;
    /* 文本颜色 */
    float: right;
    /* 右浮动，使其位于右上角 */
    font-size: 28px;
    /* 字体大小 */
    font-weight: bold;
    /* 字体加粗 */
    transition: 0.3s;
    /* 过渡效果，使鼠标悬停时颜色变化更平滑 */
    text-decoration: none;
    /* 无文本装饰 */
    cursor: pointer;
    /* 鼠标悬停时显示点击手势 */
}

.close:hover,
.close:focus {
    color: #000;
    /* 鼠标悬停或聚焦时的文本颜色 */
    text-decoration: none;
    /* 鼠标悬停或聚焦时无文本装饰 */
    outline: none;
    /* 移除聚焦时的轮廓 */
}</style>


<!--  -->
<template>  
  <div class="delete-confirmation" v-if="show">  
    <h3>确认删除</h3>  
    <p>你确定要删除这项权限吗？</p>  
    <button @click="confirm">确认</button>  
    <button @click="cancel">取消</button>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'DeleteConfirmation',  
  props: {  
    showDeleteConfirmation: {  
      type: Boolean,  
      required: true,  
    },
    DeleteItem:{
        type: any,  
      required: true,   
    }
  },  
  methods: {  
    confirm() {  
      // 发出确认事件  
      this.$emit('confirm',DeleteItem);  
    },  
    cancel() {  
      // 发出取消事件  
      this.$emit('cancel');  
    },  
  },  
};  
</script>  
  
<style scoped>  
.delete-confirmation {  
  /* 添加样式以美化确认框 */  
  border: 1px solid #ccc;  
  padding: 20px;  
  margin-top: 20px;  
  background-color: #fff;  
  position: fixed;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  z-index: 1000;  
}  
  
.delete-confirmation button {  
  margin-right: 10px;  
}  
</style>
